<template>
    <h1>{{msg}}</h1>
    <h2>{{title}}</h2>
    <input type="text" v-model="username" @blur="handleUpdate($event)">
</template>

<script setup lang="ts">
    import { ref } from 'vue'
//    defineProps({
//        msg:String
//    })

    // defineProps<{
    //     msg?: (string | number | boolean), 
    //     title:string
    // }>()

    withDefaults(defineProps<{
        msg?: (string | number | boolean), 
        title:string
    }>(), {
        msg: 'hello vite2',
        title: '默认标题'
    })

    // ts 限制单个变量类型
    const username = ref<string>('')

    // const emit = defineEmits(['on-update'])
    const emit = defineEmits<{
        (event: 'on-update', data:string): void,
        (event: 'on-delete', id:string): void,
    }>()

    const handleUpdate = (event: any) => {
        const { target } = event
        // console.log(target.value)
        emit('on-update', target.value)
    }
    
</script>